import React from "react";
import {
  List,
  ListItem,
  ListItemText,
  Box,
  styled,
} from "@mui/material";

import { Link } from "react-router-dom";
import { menuItems } from "./Common";
/**
 * 这是导航栏组件
 * @returns
 */
export default function NavBar() {
  //自定义style使列表元素在水平上均匀排列
  const StyledList = styled(List)(({ theme }) => ({
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    listStyle: "none",
  }));

  return (
    <Box>
      <StyledList>
        {menuItems.map((item) => (
          <ListItem
            key={item.id}
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              textAlign: "center",
              width: "120px",
            }}
          >
            <Link
              to={item.to}
              style={{ textDecoration: "none", color: "inherit" }} // 覆盖默认的链接样式
            >
              <ListItemText
                primary={item.title}
                sx={{
                  "&:hover": {
                    color: (theme) => theme.palette.hover.secondary, // 指定 hover 时的颜色
                  },
                }}
              />
            </Link>
          </ListItem>
        ))}
      </StyledList>
    </Box>
  );
}
